<template>
    <div class="container">
        <nav class="layout-nav">
            <div class="inner">
                <!-- LOGO -->
                <div class="brand">
                    <img src="@/assets/img/logo.gif" class="logo">
                </div>
                <!-- 导航菜单 -->
                <div class="menu">
                    <!-- 首页菜单 -->
                    <div class="level-two">
                        <div class="menu-item"> 首页</div>
                        <div class="level-two-content"></div>
                    </div>
                    <!-- 出行服务菜单 -->
                    <div class="level-two">
                        <div class="menu-item"> 出行服务</div>
                        <!-- 出行服务二级菜单 -->
                        <div class="level-two-content">
                            <div class="level-two-item"> 出行查询</div>
                            <div class="level-two-item"> 站点周边</div>
                            <div class="level-two-item"> 时刻表</div>
                            <div class="level-two-item"> 购票指南</div>
                            <div class="level-two-item"> 乘客须知</div>
                        </div>
                    </div>
                    <!-- 公司动态菜单 -->
                    <div class="level-two">
                        <div class="menu-item"> 公司动态</div>
                        <!-- 公司动态二级菜单 -->
                        <div class="level-two-content">
                            <div class="level-two-item"> 新闻中心</div>
                            <div class="level-two-item"> 公告公示</div>
                        </div>
                    </div>
                    <!-- 地铁文化菜单 -->
                    <div class="level-two">
                        <div class="menu-item"> 地铁文化</div>
                        <!-- 地铁文化二级菜单 -->
                        <div class="level-two-content">
                            <div class="level-two-item"> 车站艺术</div>
                            <div class="level-two-item"> 映像地铁</div>
                            <div class="level-two-item"> 轨道风采</div>
                            <div class="level-two-item"> BIM专栏</div>
                        </div>
                    </div>
                    <!-- 党风廉政菜单 -->
                    <div class="level-two">
                        <div class="menu-item"> 党风廉政</div>
                        <!-- 党风廉政二级菜单 -->
                        <div class="level-two-content">
                            <div class="level-two-item"> 党群建设</div>
                            <div class="level-two-item"> 清廉驿站</div>
                            <div class="level-two-item"> 职工之家</div>
                            <div class="level-two-item"> 青春家园</div>
                        </div>
                    </div>
                    <!-- 我的听景APP菜单 -->
                    <div class="level-two">
                        <div class="menu-item"> 鹭鹭行App</div>
                        <div class="level-two-content"></div>
                    </div>
                    <!-- 知识社区菜单 -->
                    <div class="level-two">
                        <div class="menu-item"> 知识社区</div>
                        <div class="level-two-content"></div>
                    </div>
                    <!-- 关于我们菜单 -->
                    <div class="level-two">
                        <div class="menu-item"> 关于我们</div>
                        <!-- 关于我们的二级菜单 -->
                        <div class="level-two-content">
                            <div class="level-two-item"> 集团概况</div>
                            <div class="level-two-item"> 招贤纳士</div>
                            <div class="level-two-item"> 集团架构</div>
                            <div class="level-two-item"> 企业战略</div>
                            <div class="level-two-item"> 大事记</div>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
    </div>
</template>

<script>
    import $ from 'jquery'

    export default {
        name: "Header",
        setup() {
            //入口函数
            $(() => {
                let nav = $(".layout-nav")
                console.log(nav)
                //鼠标移到nav条上改变其高度
                nav.mouseenter(() => {
                    nav.height(250)
                })
                //鼠标移走恢复其高度
                nav.mouseleave(() => {
                    //隐藏其他所有二级菜单
                    let temp = $(".level-two-content")
                    for (let j = 0; j < temp.length; j++) {
                        $(temp[j]).fadeOut(400)
                    }
                    nav.height(72)
                })
                let level_two = $(".menu-item")
                //为每个二级菜单添加鼠标事件
                for (let i = 0; i < level_two.length; i++) {
                    //鼠标移到二级菜单显示
                    $(level_two[i]).mouseenter(() => {
                        //隐藏其他所有二级菜单
                        let temp = $(".level-two-content")
                        for (let j = 0; j < temp.length; j++) {
                            $(temp[j]).fadeOut(400)
                        }
                        //显示该显示的二级菜单
                        $(level_two[i]).next().fadeIn(400)
                    })
                }
            })
        }
    }
</script>

<style scoped lang="less">
    /*容器样式*/
    .container {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1;
        overflow: hidden;
    }

    /*nav条样式*/
    .layout-nav {
        width: 100%;
        min-height: 72px;
        z-index: 1000;
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
        background: rgba(0, 0, 0, .3);
        /*转换图像饱和度*/
        backdrop-filter: saturate(80%) blur(5px); /*使得看起来具有毛玻璃效果*/
        /*定位*/
        transition: height 0.5s ease;
        /*内部盒子的样式*/

        /*导航文字盒子属性*/

        .inner {
            height: 100%;
            width: 1280px;
            margin: 0 auto;
            /*弹性盒子*/
            display: flex;
            /*侧轴上左对齐*/
            align-items: flex-start
        }

        /*logo图片样式*/

        .inner .brand {
            width: 180px;
            padding: 6px;
            display: flex;
            justify-content: center;

            .logo {
                width: 96px;
                height: 60px;
                border-radius: 10px;
            }
        }
    }
    /*菜单样式*/
    .menu {
        /*弹性盒子布局*/
        display: flex;
        /*盒子占相同的宽度*/
        flex: 1;
        /*在主轴上均匀排列每个元素*/
        justify-content: space-between;
        /*侧轴从开始到结尾*/
        align-items: flex-start;
        margin: 18px 10px;
        text-align: left;
        /*一级菜单文字颜色：首页  出行服务 ...*/

        .menu-item {
            color: #000
        }

        /*一级菜单项*/

        .menu-item {
            font-size: 18px;
            padding-bottom: 6px;
            text-decoration: none;
            cursor: pointer;
            color: #f2f2f2;
            border-bottom: 4px solid transparent
        }

        /*二级菜单样式*/

        .level-two-content {
            position: absolute;
            display: none;
            cursor: pointer;
            width: 180px;
            height: auto;
            z-index: 1
        }

        .menu-item:hover {
            color: #e6a704
        }

        .menu-item:active {
            font-weight: 600;
            border-bottom: 4px solid #e6a704
        }

        .level-two:last-child .menu-item {
            padding-left: 2px;
            min-width: 80px
        }

        .level-two-content .level-two-item {
            padding: 6px 0 6px;
            font-size: 16px;
            color: #f2f2f2
        }

        .level-two-content .level-two-item:active,
        .level-two-content .level-two-item:hover {
            color: #e6a704
        }
    }
</style>